<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>多源干扰融合</title>
	<link rel="stylesheet" href="styles/lib/bootstrap.min.css" />
	<script src="scripts/lib/bootstrap.bundle.min.js" defer></script>
	<link rel="stylesheet/less" href="styles/style.less" />
	<link rel="stylesheet/less" href="styles/plugin.less" />
	<script src="scripts/lib/less.js" defer></script>
	<script type="module" src="scripts/main.js" defer></script>
</head>

<body>
	<header>
		<div class="title">多源干扰融合</div>
	</header>
	<div class="status-bar">
		<div class="status">未收到任何卫星图像</div>
		<div class="progress-box">
			<strong id="progress-desc"></strong>
			<div class="progress" role="progressbar">
				<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 0%"></div>
			</div>
			<strong id="progress-percent">0%</strong>
		</div>
	</div>
	<main>
		<section class="left">
			<div class="subtitle">
				<h5>卫星实拍</h5>
			</div>
			<div class="photo-wall">
			</div>
		</section>
		<section class="right">
			<div class="setting">
				<label for="interval">采样频率：
					<input class="form-control" id="interval" type="number" min="0" max="99" value="3" />
				</label>
				<label for="light">光照：
					<input class="form-control" id="light" type="number" min="0" max="99" value="0" />
				</label>
				<!-- <label for="fog">云雾：
					<input class="form-control" id="fog" type="number" min="0" max="99" value="0" />
				</label> -->
				<label for="noise">噪声：
					<input class="form-control" id="noise" type="number" min="0" max="100" value="0" />
				</label>
				<label for="geo">几何畸变：
					<input class="form-control" id="geo" type="number" min="0" max="100" value="0" />
				</label>
				<label for="scale">尺度变换：
					<input class="form-control" id="scale" type="number" min="0" max="99" value="0" />
				</label>
				<div class="btn-group" role="group">
					<button id="reset-btn" type="button" class="btn btn-secondary btn-sm">重置</button>
					<button id="gen-btn" type="button" class="btn btn-success btn-sm">生成</button>
				</div>
			</div>
			<div class="subtitle">
				<h5>图片预览</h5>
			</div>
			<div class="photo-wall">
			</div>
		</section>
	</main>
	<footer>
		<div class="address">
			<label for="local-ip">本地IP：</label>
			<input type="text" class="form-control" maxlength="20" id="local-ip" disabled />
			<label for="local-port">监听端口：</label>
			<input type="text" class="form-control" maxlength="6" id="local-port" disabled />
		</div>
		<!-- <div class="address">
			<strong>下位机</strong>
			<label for="target-ip">IP地址：</label>
			<input type="text" class="form-control" id="target-ip" />
			<label for="target-port">端口：</label>
			<input type="text" class="form-control" id="target-port" />
			<label for="output-switch">自动发送：</label>
			<label class="switch">
				<input type="checkbox" id="output-switch" />
				<span class="slider round"></span>
			</label>
		</div> -->
	</footer>
	<div id="toast" class="toast align-items-center text-bg-warning border-0 position-" role="alert" aria-live="assertive"
		aria-atomic="true">
		<div class="d-flex">
			<div class="toast-body">
			</div>
			<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
				aria-label="Close"></button>
		</div>
	</div>
</body>

</html>